<template>
  <div>

    <div align="center">
      <h1>试卷名称:{{paper.paperName}} 试卷总分:{{paper.paperScore}} 试卷时长:{{paper.paperTime}}</h1>
      <h3>计时器:{{timer}}</h3>
    </div>

    <h1>一:单选题</h1>
    <template v-for="(x,index) in signList">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>{{index+1}}:{{x.quContent}}</span>
        </div>
        <div  class="text item">
          <input type="radio" value="A"  :name="'s'+index"/>A:{{x.quAoption}}
        </div>
        <div  class="text item">
          <input type="radio" value="B" :name="'s'+index"/>B:{{x.quBoption}}
        </div>
        <div  class="text item">
          <input type="radio" value="C" :name="'s'+index"/>C:{{x.quCoption}}
        </div>
        <div  class="text item">
          <input type="radio" value="D" :name="'s'+index"/>D:{{x.quDoption}}
        </div>
      </el-card>
    </template>

    <h1>二:多选题</h1>
    <template v-for="(x,index) in moreList">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>{{index+1}}:{{x.quContent}}</span>
        </div>
        <div  class="text item">
          <input type="checkbox" value="A" :name="'m'+index"/>A:{{x.quAoption}}
        </div>
        <div  class="text item">
          <input type="checkbox" value="B" :name="'m'+index"/>B:{{x.quBoption}}
        </div>
        <div  class="text item">
          <input type="checkbox" value="C" :name="'m'+index"/>C:{{x.quCoption}}
        </div>
        <div  class="text item">
          <input type="checkbox" value="D" :name="'m'+index"/>D:{{x.quDoption}}
        </div>
      </el-card>
    </template>

    <h1>三:判断题</h1>
    <template v-for="(x,index) in judgeList">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>{{index+1}}:{{x.quContent}}</span>
        </div>
        <div  class="text item">
          <input type="radio" value="√" :name="'j'+index"/>√
        </div>
        <div  class="text item">
          <input type="radio" value="×" :name="'j'+index"/>×
        </div>

      </el-card>
    </template>

    <br><br>
    <div align="center">
          <el-button type="success" @click="submit">交卷</el-button>

    </div>

  </div>

</template>

<script>
  export default {
    name: "PaperExam",
    data(){
      return{
        timer:2000,//计时器
        paperForm:{//试卷表单
          paperName:"java测试02",
          paperTime:"",
          paperScore:"",
          s:"",//单选题答案
          m:"",//多选题答案
          j:"",//判断题答案
        },
        paper:{},//试卷对象
        signList:[],//单选题数组
        moreList:[],//多选题数组
        judgeList:[]//判断题数组

      }
    },
    methods:{
      loadData(){//加载试卷信息
        var self = this;
        //发送ajax请求
        this.$http.post("/paper-info/queryPaper",this.$qs.stringify(this.paperForm)).then(function (rs) {
          if(rs.data.code==200){
            self.paper = rs.data.data;
            //取出各种题型
            for(var i =0;i<self.paper.list.length;i++){
              if(self.paper.list[i].quType=="单选题"){
                //添加到单选题数组中
                self.signList.push(self.paper.list[i]);
              } else if(self.paper.list[i].quType=="多选题"){
                //添加到多选题数组中
                self.moreList.push(self.paper.list[i]);
              }else{
                //添加到判断题数组中
                self.judgeList.push(self.paper.list[i]);
              }
            }
          }else{
            //清空
            self.paper={};
          }
        })
      },
      submit(){//交卷
          //获取单选题的答案
         var s="";
         for(var i=0;i<this.signList.length;i++){
             s += $("input[name='s"+i+"']:checked").val()+",";
          }
         console.log(s);

        //获取判断题的答案
        var j="";
        for(var i=0;i<this.judgeList.length;i++){
          j += $("input[name='j"+i+"']:checked").val()+",";
        }
        console.log(j);

        //获取多选题的答案
        var m="";
        for(var i=0;i<this.moreList.length;i++){
          var an="";
          $("input[name='m"+i+"']:checked").each(function () {
               an+=$(this).val();
          })
          //判断他是否做了多选题
          if(an==""){
            an="undefined";
          }
          m+=an+",";
        }
        console.log(m);

        this.paperForm.s = s;
        this.paperForm.m = m;
        this.paperForm.j = j;

        //发送考试评分
        var self = this;
        //发送ajax请求
        this.$http.post("/paper-info/countPaper",this.$qs.stringify(this.paperForm)).then(function (rs) {
                    if(rs.data.code==200){
                        self.$alert("你的考试成绩:"+rs.data.data+"分");
                    }else{
                        self.$alert("评分失败");
                    }
        })


      },
      startTime(){//启动计时器
          var self = this;
          var t = setInterval(function () {
              self.timer--;
              //倒计时提示
              if(self.timer==8){
                  self.$message("你还有8秒完成试卷");
              }
              if(self.timer==0){
                //清除计时器
                clearInterval(t);
                //自动交卷
                self.submit();
              }
          },1000)
      }
    },
    created() {
      //获取试卷名称，总分，时长
      //this.paperForm = this.$route.query;
      this.loadData();
      //启动计时器
      this.startTime();
    }
  }
</script>

<style scoped>

</style>
